<template>
  <div class="search">
    <f-form ref="form" :action="api.content" :form-key="this.formItem.msgId" :file-ids="fileIds">
      <f-form-item label="消息类型" name="msgTypeId" :required="true" type="select" :value="formItem.msgTypeId" :data="api.msgType.list" label-key="typeName" value-key="msgTypeId"/>
      <f-form-item label="消息标题" name="msgTitle" :required="true" :rules="rules.required(5,20)" :value="formItem.msgTitle"/>
      <f-form-item label="消息内容" type="editor" :required="true" name="msgContent" :value="formItem.msgContent"/>
      <f-form-item label="消息封面" type="upload" name="msgImage" :value="formItem.msgImage" @uploadSuccess="msgImageUploadSuccess"/>
    </f-form>
  </div>
</template>
<script>
  import api from './js/api'

  export default {
    name: 'contentForm',
    props: {},
    data() {
      return {
        api: api,
        isAdd: true,//是否是添加模式
        loaded: false,//是否加载完成
        fileIds: [],//上传文件ID
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          msgId: '',
          msgTypeId: '',
          msgTitle: '',
          msgImage: '',
          sendTime: '',
          msgContent: '',
          pushState: 0,
          pushDeviceType: 0,
          sendType: 0
        }
      },
      //表单赋值
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        if (data && data.msgId) {
          this.$refs.form.getDetails({ msgId: data.msgId }, (data) => {
            this.formItem = data
            this.loaded = true
          })
          this.isAdd = false
        } else {
          this.loaded = true
        }
      },
      //消息图片上传回调
      msgImageUploadSuccess(fileUrl, files, fileIds, removeIds) {
        this.fileIds = fileIds
      },
      //提交表单
      handleSubmit(callback) {
        this.$refs.form.handlerSubmit({}, callback)
      }
    },
    created() {
    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
